* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
    line-height: 2.5rem;
}
html {
    font: 16px/1.6 Titillium,'微软雅黑',Arial,'黑体','宋体',sans-serif;
    font-weight: 200;
}
table {
	border-collapse:collapse;
}
th {
    background-color:green;
    color:white;
}
label {
    display: inline-block;
}
table, td, th {
    border:1px solid black;
    text-align:center;
    padding:5px 2px 5px 2px;
	margin: 1rem auto;
    }
button {
    height: 1.5rem;
    /* width: 3rem; */
    margin: .2rem;
}
#page {
    display: flex;
    height: 100vh;
    width: 100vw;
}
#iframe {
    height: 100%;
    width: 100%;
}
#left-bar {
    width: 12rem;
    font-size: medium;
    overflow-y: auto;
    overflow-x: auto;
    /* background-color: antiquewhite; */
    /* box-shadow: 0 30px 60px rgb(0 0 0 / 20%); */
}
#r-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#top-bar {
    height: 2.5rem;
    background-color: lightblue;
}
#tabs {
    line-height: 2.5rem;
    display: flex;
    border-left: 1px solid grey;
    box-sizing: border-box;
}
#tabs li {
    /* flex: 1; */
    display: inline-flex;
    width: 5rem;
    cursor: pointer;
    height: 2.5rem;
    overflow: hidden;
    box-sizing: border-box;
    border-right: 1px solid grey;
    background-color: none;
}
#tabs li:hover {
    font-weight: 700;
    /* color: orangered; */
    transition-duration: .5s;
}
#tabs li.activate {
    background-color: greenyellow;
    border-radius: 0.5rem;
    box-shadow: 1px 0 5px 2px #333;
    font-weight: 700;
    border: none;
    /* transition-duration: 1s; */
}
#tabs li a {
    flex: 1;
    text-align: center;
}
#tabs li span {
    width: 0.5rem;
    /* height: 2.5rem; */
    background-color: orange;
    float: right;
}
#tabs li span:hover {
    background-color: red;
    transition-duration: .5s;
    
}
#show-page {
    flex: 1;
    border: 1px solid grey;
    box-sizing: border-box;
    padding: 1rem;
    /* background-color: aqua; */
}
/* logo */
#logo {
    height: 4rem;
    text-align: center;
    line-height: 4rem;
    font-size: 24px;
    font-weight: 500;
    color: hsla(122deg, 39%, 49%, 1);
}

.left-menu1 {
    padding-left: 1rem;
    /* background-color: white; */
    height: 2.5rem;
    line-height: 2.5rem;
}

.right-menu {
    top: 0;
    right: 0;
    position: absolute;
}

.right-menu1 {
    background-color: white;
    padding-left: 1rem;
    
}

#left-bar ul {
    background-color: antiquewhite;
    box-shadow: inset 0 .2rem .4rem rgb(0 0 0 / 20%);
    padding: 0 .5rem 0 2rem;
}
#left-bar div:hover, #left-bar li:hover, .set:hover, .openexl:hover {
    cursor: pointer;
}
#left-bar div span {
    float: right;
    padding-right: 1rem;
}
.left-menu1.collapsed {
    border-left: .3rem orange solid;
    transition-duration: .2s;
}
.left-menu1 span:after {
    content: "∨";
}
.left-menu1.collapsed span:after {
    content: "∧";
}

.left-menu1 + ul li {
    overflow: hidden;
    height: 0;
    transition: height .2s ease-out;
}
.left-menu1.collapsed + ul li {
    height: 2rem;
    line-height: 2rem;
    transition: height .2s ease-in;
}

#set-vars {
    padding: 0;
}

.page {
    overflow-x: auto;
    text-align: center;
}

#beyondShow {
    /* background: #00000030 url("/statics/loading.gif") no-repeat center center; */
    background: #00000030 no-repeat center center;
    text-align: center;
    z-index: 99;
}

#beyondShow ul {
    margin: 0 auto;
    background-color: gray;
    width: 25rem;
    border-radius: .5rem;
}

#beyondShow input {
    width: 20rem;
}

#beyondShow img, .loading {
    content: url("/statics/loading.gif");
}

#beyondShow h5 {
    margin-top: 45vh;
}

.log {
    width: 50%;
    height: 10rem;
    background-color: antiquewhite;
}





